import React, { Component } from 'react';
import { Row, Col, Card, List, Avatar, Button, Input, InputNumber, Menu, Select } from 'antd';
import Link from 'umi/link';
import { connect } from 'dva';
import { formatMessage } from 'umi/locale';
import KnifeCutParamsForm from './hdForms/KnifeCutParamsForm';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;

@connect(({ ds, cbjt }) => ({ ds, cbjt }))
class CbjZmcTool extends Component {
  constructor(props) {
    super(props);
    this.state = {
      nowPointNumber: '1', // 当前点的编号.
      pointList: ['1', '2', '3', '4', '5', '6', '7', '8', '9'], // 显示的点的编号
      axisList: ['X', 'Y', 'Z', 'W'], // 显示的轴编号
      axisNumber: 'X', // 轴号
      moveDistance: '', // 移动距离
      lineX1: '', // 切直线的时候点1的x坐标
      lineY1: '', // 切直线的时候点1的y坐标
      lineX2: '', // 切直线的时候点2的x坐标
      lineY2: '', // 切直线度额时候点2的y坐标
      offsetX: '', // 刀头激光偏移X方向偏移
      offsetY: '', // 刀头激光偏移Y方向偏移
      outputList: ['真空吸附', '刀片转动', '压杆下压', '真空破坏', '电机报警清除'], // 显示的真空操作的列表
      chooseOutPut: '真空吸附',
      crossCenterX: '', // 十字中心点x坐标
      crossCenterY: '', // 十字中心点y坐标
      dragDis: '', // 拖拽距离
      fourX: '', // 四轴绝对移动x坐标
      fourY: '', // 四轴绝对移动y坐标
      fourZ: '', // 四轴绝对移动z坐标
      fourW: '', // 四轴绝对移动w坐标
      intervalX: '', // X间隔
      intervalY: '', // Y间隔
      xNums: '', // x轴采样个数
      yNums: '', // y轴采样个数
      xMin: '', // 测高最小x坐标
      yMin: '', // 测高最小y坐标
    };
  }

  clickOpenGetPos = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/clickOpenGetPos',
    });
  };

  clickCloseGetPos = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/clickCloseGetPos',
    });
  };

  clickRsStop = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/clickRsStop',
    });
  };

  clickCbjReset = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/clickCbjReset',
    });
  };

  onPointChange = value => {
    this.setState({
      nowPointNumber: value,
    });
  };

  savePointCoord = e => {
    const { dispatch } = this.props;
    const { xDpos, yDpos } = this.props.cbjt;
    const { nowPointNumber } = this.state;

    dispatch({
      type: 'cbjt/savePointCoord',
      payload: [nowPointNumber, xDpos, yDpos],
    });
  };

  onAxisNumberChange = value => {
    this.setState({
      axisNumber: value,
    });
  };

  axisRelMove = e => {
    const { dispatch } = this.props;
    const { axisNumber, moveDistance } = this.state;
    dispatch({
      type: 'cbjt/axisRelMove',
      payload: [axisNumber, moveDistance],
    });
  };

  axisAbsMove = e => {
    const { dispatch } = this.props;
    const { axisNumber, moveDistance } = this.state;
    dispatch({
      type: 'cbjt/axisAbsMove',
      payload: [axisNumber, moveDistance],
    });
  };

  cutOneLine = e => {
    const { dispatch } = this.props;
    const { lineX1, lineY1, lineX2, lineY2 } = this.state;
    dispatch({
      type: 'cbjt/cutOneLine',
      payload: [lineX1, lineY1, lineX2, lineY2],
    });
  };

  cutRect = e => {
    const { dispatch } = this.props;
    const { lineX1, lineY1, lineX2, lineY2 } = this.state;
    dispatch({
      type: 'cbjt/cutRect',
      payload: [lineX1, lineY1, lineX2, lineY2],
    });
  };

  cutOneLineWithCapfile = e => {
    const { dispatch } = this.props;
    const { lineX1, lineY1, lineX2, lineY2 } = this.state;
    dispatch({
      type: 'cbjt/cutOneLineWithCapfile',
      payload: [lineX1, lineY1, lineX2, lineY2],
    });
  };

  saveKnifeOffset = e => {
    const { dispatch } = this.props;
    const { offsetX, offsetY } = this.state;
    dispatch({
      type: 'cbjt/saveKnifeOffset',
      payload: [offsetX, offsetY],
    });
  };

  onOutputChange = value => {
    this.setState({
      chooseOutPut: value,
    });
  };

  openOutput = e => {
    const { dispatch } = this.props;
    const { chooseOutPut } = this.state;
    dispatch({
      type: 'cbjt/openOutput',
      payload: chooseOutPut,
    });
  };

  closeOutput = e => {
    const { dispatch } = this.props;
    const { chooseOutPut } = this.state;
    dispatch({
      type: 'cbjt/closeOutput',
      payload: chooseOutPut,
    });
  };

  cutCrossTest = e => {
    const { dispatch } = this.props;
    const { crossCenterX, crossCenterY } = this.state;
    dispatch({
      type: 'cbjt/cutCrossTest',
      payload: [crossCenterX, crossCenterY],
    });
  };

  dragTest = e => {
    const { dispatch } = this.props;
    const { dragDis } = this.state;
    dispatch({
      type: 'cbjt/dragTest',
      payload,
      dragDis,
    });
  };

  testPlatform = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/testPlatform',
    });
  };

  // 下刀
  downKnife = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/downKnife',
    });
  };

  // 抬刀
  upKnife = e => {
    const { dispatch } = this.props;
    dispatch({
      type: 'cbjt/upKnife',
    });
  };

  fourAxisAbsMove = e => {
    const { dispatch } = this.props;
    const { fourX, fourY, fourZ, fourW } = this.state;
    dispatch({
      type: 'cbjt/fourAxisAbsMove',
      payload: [fourX, fourY, fourZ, fourW],
    });
  };

  saveCapfile = e => {
    const { dispatch } = this.props;
    const { intervalX, intervalY, xMin, yMin, xNums, yNums } = this.state;
    dispatch({
      type: 'cbjt/saveCapfile',
      payload: [xMin, yMin, xNums, yNums, intervalX, intervalY],
    });
  };

  render() {
    const { cbjZmcStates } = this.props.ds;
    const {
      knifeCutParams,
      xDpos, // x轴坐标
      yDpos, // y轴坐标
      zDpos, // z轴坐标
      wDpos, // w轴坐标
      btnOpenGetPosCliked, // 坐标反馈按钮是否按下,如果已经打开成功了,就要变灰色.
    } = this.props.cbjt;
    const { nowPointNumber, pointList, axisList, outputList } = this.state;
    const pointChildren = [];

    for (let i = 0; i < pointList.length; i++) {
      pointChildren.push(
        <Select.Option key={i.toString()} value={pointList[i]}>
          {pointList[i]}
        </Select.Option>
      );
    }

    const axisChildren = [];
    for (let i = 0; i < axisList.length; i++) {
      axisChildren.push(
        <Select.Option key={i.toString()} value={axisList[i]}>
          {axisList[i]}
        </Select.Option>
      );
    }

    const outputChildren = [];
    for (let i = 0; i < outputList.length; i++) {
      outputChildren.push(
        <Select.Option key={i.toString()} value={outputList[i]}>
          {outputList[i]}
        </Select.Option>
      );
    }

    return (
      <>
        <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>裁切机切割参数设置</font>}>
          <KnifeCutParamsForm knifeCutParams={knifeCutParams} />
        </Card>
        <Card title={<font style={{ color: '#FF0000', fontSize: 16 }}>裁切机运动控制</font>}>
          <Row>
            <Col>
              设备状态:&nbsp;&nbsp;
              {cbjZmcStates.online ? (
                <font style={{ color: '#00FF00', fontSize: 16 }}>已连接</font>
              ) : (
                <font style={{ color: '#FF0000', fontSize: 16 }}>已断开</font>
              )}
              <Button
                onClick={this.clickOpenGetPos}
                style={{ marginLeft: 30 }}
                disabled={btnOpenGetPosCliked}
              >
                打开坐标反馈
              </Button>
              <Button
                onClick={this.clickCloseGetPos}
                style={{ marginLeft: 10 }}
                disabled={!btnOpenGetPosCliked}
              >
                关闭坐标反馈
              </Button>
              <Button onClick={this.clickRsStop} style={{ marginLeft: 10 }}>
                手动急停
              </Button>
              <Button onClick={this.clickCbjReset} style={{ marginLeft: 10 }}>
                手动复位
              </Button>
            </Col>
            <Col style={{ marginTop: 10 }}>
              X轴坐标:&nbsp;
              <span style={{ marginRight: 10, width: 80 }}>{xDpos}</span>
              Y轴坐标:&nbsp;
              <span style={{ marginRight: 10, width: 80 }}>{yDpos}</span>
              Z轴坐标:&nbsp;
              <span style={{ marginRight: 10, width: 80 }}>{zDpos}</span>
              W轴坐标:&nbsp;
              <span style={{ marginRight: 10, width: 80 }}>{wDpos}</span>
            </Col>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <Col>
              请选择当前点的编号&nbsp;&nbsp;&nbsp;
              <Select
                style={{ width: 80 }}
                optionFilterProp="pointChildren"
                defaultValue={'1'}
                onChange={this.onPointChange}
              >
                {pointChildren}
              </Select>
              <Button style={{ marginLeft: 15 }} onClick={this.savePointCoord}>
                保存点{nowPointNumber}
              </Button>
            </Col>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <Col>
              移动测试 &nbsp;&nbsp; 轴号 &nbsp;
              <Select
                style={{ width: 60 }}
                optionFilterProp="axisChildren"
                defaultValue={'X'}
                onChange={this.onAxisNumberChange}
              >
                {axisChildren}
              </Select>
              <span style={{ marginLeft: 20 }}>数值&nbsp;</span>
              <Input
                defaultValue={''}
                onChange={e => this.setState({ moveDistance: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button onClick={this.axisRelMove} style={{ marginRight: 10 }}>
                相对移动
              </Button>
              <Button onClick={this.axisAbsMove} style={{ marginRight: 10 }}>
                绝对移动
              </Button>
            </Col>
          </Row>
          <Row style={{ marginTop: 10 }}>
            <Col>
              四轴同时绝对移动测试
              <Input
                defaultValue={''}
                onChange={e => this.setState({ fourX: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              y&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ fourY: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              z&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ fourZ: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              w&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ fourW: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button onClick={this.fourAxisAbsMove} style={{ marginRight: 10 }}>
                四轴绝对移动
              </Button>
            </Col>
          </Row>

          <Row style={{ marginTop: 20 }}>
            <Col>
              切直线测试&nbsp;&nbsp; x1&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ lineX1: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              y1&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ lineY1: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              x2&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ lineX2: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              y2&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ lineY2: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button onClick={this.cutOneLine} style={{ marginRight: 10 }}>
                切直线
              </Button>
              <Button onClick={this.cutRect} style={{ marginRight: 10 }}>
                切矩形
              </Button>
              <Button onClick={this.cutOneLineWithCapfile} style={{ marginRight: 10 }}>
                带台面补偿的切直线
              </Button>
              <Button onClick={this.cutFourLines} style={{ marginRight: 10 }}>
                带台面补偿的切矩形
              </Button>
            </Col>
          </Row>
          <Row style={{ marginTop: 20 }}>
            <Col>
              刀头激光偏移(两个值都要填,如果没有偏移,就填0)&nbsp;&nbsp;&nbsp; X方向偏移:
              &nbsp;&nbsp;&nbsp;
              <Input
                onChange={e => this.setState({ offsetX: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              Y方向偏移: &nbsp;&nbsp;&nbsp;
              <Input
                onChange={e => this.setState({ offsetY: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button style={{ marginLeft: 15 }} onClick={this.saveKnifeOffset}>
                保存
              </Button>
            </Col>
          </Row>

          <Row style={{ marginTop: 20 }}>
            <Col>
              切十字测试&nbsp;&nbsp; 十字中心 x&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ crossCenterX: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              y&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ crossCenterY: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button onClick={this.cutCrossTest} style={{ marginRight: 20 }}>
                切十字
              </Button>
              拖拽测试&nbsp;&nbsp; 距离&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ dragDis: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button onClick={this.dragTest} style={{ marginRight: 10 }}>
                开始拖拽
              </Button>
            </Col>
          </Row>

          <Row style={{ marginTop: 20 }}>
            <Col>
              输出口口控制 &nbsp;&nbsp; 端口名称 &nbsp;
              <Select
                style={{ width: 140 }}
                optionFilterProp="outputChildren"
                defaultValue={'真空吸附'}
                onChange={this.onOutputChange}
              >
                {outputChildren}
              </Select>
              <Button onClick={this.openOutput} style={{ marginLeft: 15 }}>
                打开
              </Button>
              <Button onClick={this.closeOutput} style={{ marginLeft: 15 }}>
                关闭
              </Button>
            </Col>
          </Row>

          <Row style={{ marginTop: 20 }}>
            <Col>
              Z轴测试
              (下刀的时候,会根据当前设置的下刀深度进行下刀,请确认好下刀深度再操作)&nbsp;&nbsp;
              <Button onClick={this.downKnife} style={{ marginRight: 10 }}>
                下刀
              </Button>
              <Button onClick={this.upKnife} style={{ marginRight: 10 }}>
                抬刀
              </Button>
            </Col>
          </Row>

          <Row style={{ marginTop: 20 }}>
            <Col>
              台布测高,先测量,根据zdeveloper打印的日志填写测量数据并保存&nbsp;&nbsp;{' '}
              <Button onClick={this.testPlatform} style={{ marginRight: 10 }}>
                开始测高
              </Button>
            </Col>
            <Col style={{ marginTop: 10 }}>
              X轴方向的测量间隔&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ intervalX: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              Y轴方向的测量间隔&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ intervalY: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              X轴方向的采样点个数&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ xNums: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              Y轴方向的采样点个数&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ yNums: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              测量的起始坐标&nbsp; x:&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ xMin: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              y:&nbsp;
              <Input
                defaultValue={''}
                onChange={e => this.setState({ yMin: e.target.value })}
                style={{ marginRight: 10, width: 80 }}
              />
              <Button onClick={this.saveCapfile} style={{ marginRight: 10 }}>
                保存测高数据
              </Button>
            </Col>
          </Row>
        </Card>
      </>
    );
  }
}

export default CbjZmcTool;
